<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cursor</title>
    <meta name="description" content="Cursor - A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
    <script src="https://unpkg.com/aframe-event-set-component@4.1.2/dist/aframe-event-set-component.min.js"></script>
  </head>
  <body>
    <a-scene background="color: #FBE0D8">
      <a-assets>
        <audio id="blip1" src="../../showcase/anime-UI/audio/321103__nsstudios__blip1.wav"></audio>
        <audio id="blip2" src="../../showcase/anime-UI/audio/321104__nsstudios__blip2.wav"></audio>
        <audio id="shot" src="shot.ogg"></audio>
        <a-mixin id="cube" geometry="primitive: box"></a-mixin>
        <a-mixin id="hoverColor" event-set__mouseenter="material.color: #CC435F"></a-mixin>
        <a-mixin id="selectColor" event-set__click="material.color: #876A96"></a-mixin>
        <a-mixin id="leaveColor" event-set__mouseleave="material.color: #9DE0AD"></a-mixin>
        <a-mixin id="red" material="color: #F35F5F"></a-mixin>
        <a-mixin id="green" material="color: #9DE0AD"></a-mixin>
        <a-mixin id="blue" material="color: #36A3EB"></a-mixin>
        <a-mixin id="yellow" material="color: #F1EA65"></a-mixin>
        <a-mixin id="sphere" geometry="primitive: sphere"></a-mixin>
      </a-assets>

      <a-entity id="mouseCursor" cursor="rayOrigin: mouse" raycaster="objects: .intersectable"></a-entity>

      <a-entity position="0 .6 4">
        <a-camera>
          <a-entity raycaster="far: 30; objects: .intersectable"
                    cursor
                    geometry="primitive: ring; radiusOuter: 0.015;
                              radiusInner: 0.01; segmentsTheta: 32"
                    material="color: #283644; shader: flat"
                    position="0 0 -0.75"></a-entity>
        </a-camera>
      </a-entity>

      <a-entity position="-3.5 1 0">
        <a-entity mixin="red cube"
                  class="intersectable"
                  animation="startEvents: click; property: position; from: 0 0 0; to: 0 0 -10; dur: 2000">
        </a-entity>
      </a-entity>

      <a-entity position="0 1 1">
        <a-entity id="invisibleCube"
                  mixin="cube"
                  material="color: grey; opacity: 0.3; transparent: true"
                  scale="1 1 0.1"
                  animation="startEvents: click; property: rotation; to: 0 360 0; easing: linear; dur: 2000">
        </a-entity>
      </a-entity>

      <a-entity position="0 1 0">
        <a-entity id="foregroundCube"
                  class="intersectable"
                  mixin="green cube hoverColor selectColor leaveColor"
                  sound__1="on: click; src: #blip1"
                  sound__2="on: mouseenter; src: #blip2"
                  animation="startEvents: click; property: rotation; to: 0 360 0; easing: linear; dur: 2000">
        </a-entity>
      </a-entity>

      <a-entity position="1 1 0">
        <a-entity mixin="yellow cube"
                  sound__1="on: click; src: #shot; poolSize: 6"
                  sound__2="src: #blip2; autoplay: true"
                  animation="startEvents: click; property: scale; to: 1.2 1.2 1.2; easing: linear; dur: 200">
        </a-entity>
      </a-entity>

      <a-entity position="0 1 -3">
        <a-entity id="backgroundCube"
                  class="intersectable"
                  mixin="green cube"
                  animation="startEvents: click; property: rotation; to: 0 360 0; easing: linear; dur: 2000">
        </a-entity>
      </a-entity>

      <a-entity position="3.5 1 0" rotation="0 45 0">
        <a-entity mixin="blue cube"
                  class="intersectable"
                  animation="startEvents: click; loop: 1; dir: alternate; property: position; from: 0 0 0; to: 15 0 0; dur: 2000">
        </a-entity>
      </a-entity>

      <a-entity mixin="yellow cube" position="0 3 -3" class="intersectable clickable" rotation="0 45 0" scale=".5 .5 .5"></a-entity>
    </a-scene>
  </body>
</html>
